<script type="text/javascript" charset="UTF-8">
	$(document).ready( function() {
		//inject useful css and js into head 
		$('head').append(
			$('<link/>', { type:'text/css', href:'css/fullcalendar.css', rel:'stylesheet' }),
			$('<link/>', { type:'text/css', href:'css/ui-lightness/jquery-ui-1.8.21.custom.css', rel:'stylesheet' }),
			$('<script/>', { type:'text/javascript', src:'js/jquery-ui-1.8.21.custom.min.js' }),
			$('<script/>', { type:'text/javascript', src:'js/fullcalendar.min.js' })
		);

		$('#calendar').fullCalendar({
			header: { //cabecera
				left: 'prev,today,next',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			firstDay: 1, //primer dia de la semana / lunes
			buttonText: { //texto botones navegacion
				today: 'hoy',
				month: 'mes',
				week: 'semana',
				day: 'd&iacute;a'
			},
			monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
			monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
			dayNames: ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
			dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sab'],
			allDaySlot: false, //vista all-day en semana y dia
			minTime: '11:00am', //primer hora mostrada / sin scroll
			eventColor: '#378006', //color eventos
			//eventBorderColor: '#000',
			titleFormat: { //formato titulo
				month: "MMMM 'de' yyyy",
				week: "d ['de' MMMM][ 'de' yyyy]{ '&#8212;' d 'de' MMMM 'de' yyyy}",
				day: "dddd, d 'de' MMMM 'de' yyyy"
			},
			columnFormat: { //formato titulo columna
				month: 'dddd',
				week: 'ddd d/M',
				day: 'dddd d/M'
			},
			timeFormat: { //formato hora evento
				month: 'H(:mm)',
				agenda: 'H:mm{ - H:mm}'
			},
			//axisFormat: 'H(:mm)', //hora vista semana y dia
			//editable: true,
// 			droppable: true, // this allows things to be dropped onto the calendar !!!
// 			selectable: true,
// 			selectHelper: true,
// 			drop: function( date, allDay ) { // this function is called when something is dropped
// 				// retrieve the dropped element's stored Event Object
// 				var originalEventObject = $(this).data('eventObject');

// 				// we need to copy it, so that multiple events don't have a reference to the same object
// 				var copiedEventObject = $.extend({}, originalEventObject);

// 				// assign it the date that was reported
// 				//copiedEventObject.start = date;
// 				//copiedEventObject.allDay = allDay;

// 				var d = date.getDate();
// 				var m = date.getMonth();
// 				var y = date.getFullYear();

// 				var startTime = copiedEventObject.begin.split(':');
// 				var endTime = copiedEventObject.finish.split(':');

// 				copiedEventObject.start = new Date(y, m, d, startTime[0], startTime[1]);
// 				copiedEventObject.end = new Date(y, m, d, endTime[0], endTime[1]);

// 				// render the event on the calendar
// 				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
// 				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// 			},
			dayClick: function( date, allDay, jsEvent, view ) {
				$( "#dialog-modal" ).dialog({
					height: 140,
					resizable: false,
					modal: true,
					buttons: {
						'Appointment': function() {
							$( this ).dialog( "close" );
						},
						'Birthday': function() {
							$( this ).dialog( "close" );
						}
					}
				});
				//alert('Clicked on the slot: ' + date);
				//alert('Current view: ' + view.name);
				// change the day's background color just for fun
				//$(this).css('background-color', 'red');
			},
			eventClick: function( event, jsEvent, view ) {
				alert('Event: ' + event.title);
				//alert('View: ' + view.name);
				// change the border color just for fun
				//$(this).css('border-color', 'red');
				if (event.url) {
				//	window.open(event.url);
					return false;
				}
			},
			eventMouseover: function( event, jsEvent, view ) {
				//alert('Event: ' + event.title);
				//alert('View: ' + view.name);
				// change the border color just for fun
				$(this).css('text-decoration', 'underline');
				$(this).css('cursor', 'pointer');
			},
			eventMouseout: function( event, jsEvent, view ) {
				//alert('Event: ' + event.title);
				//alert('View: ' + view.name);
				// change the border color just for fun
				$(this).css('text-decoration', 'none');
				$(this).css('cursor', 'auto');
			},
			loading: function(bool) {
				if (bool) {
					$('#loading').show();
				}else{
					$('#loading').hide();
				}
			}
			//events: [
			//	{
			//		title: 'My Event',
			//		start: '2012-07-11T18:30:00',
			//		end: '2012-07-11T21:00:00',
			//		allDay: false,
			//		url: 'http://www.google.com.ar/'
			//	}
			//]
		});
	});
</script>

<div id="calendar" style="margin: auto; width: 800px;"></div>
<div id="dialog-modal" title="New Event">
	<p>Choose an option</p>
</div>
